/*
textarea框的效果
*/

/* 设置容器为flex布局，使内容水平排列 */
.container {
    display: flex;
    justify-content: space-between; /* 将内容分布在左右两侧 */
    padding: 20px;
    height: 100vh; /* 使容器占满整个视口高度 */
}

/* 设置textarea的样式 */
textarea {
    width: 45%; /* 设置宽度为容器的45% */
    height: 80%; /* 设置高度为容器的80% */
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box; /* 确保padding不会影响宽度 */
}

/* 左侧textarea的样式 */
#leftTextarea {
    margin-right: 10px; /* 右侧留出一些间距 */
}

/* 右侧textarea的样式 */
#rightTextarea {
    margin-left: 10px; /* 左侧留出一些间距 */
}

/* 定义渐变动画 */
@keyframes border-gradient {
    0% {
        border-color: #000000; /* 红色 */
    }
    50% {
        border-color: #ff0000;
    }
    100% {
        border-color: #000000; /* 红色 */
    }
}

/* 应用动画到textarea */
.leftTextarea {
    padding: 10px;
    font-size: 16px;
    border: 3px solid #ff0000; /* 初始边框颜色 */
    border-radius: 5px;
    outline: none; /* 移除默认的聚焦边框 */
    animation: border-gradient 4s infinite; /* 4秒完成一次动画，无限循环 */
}

/* 聚焦时停止动画 */
.leftTextarea:focus {
    animation: none; /* 停止动画 */
    border-color: #007bff; /* 设置聚焦时的边框颜色 */
}

.rightTextarea {
    padding: 10px;
    font-size: 16px;
    border: 4px solid transparent; /* 设置透明边框 */
    border-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet) 1;
    border-image-slice: 1;
    outline: none; /* 移除默认的焦点边框 */
}

.rightTextarea:focus {
    border-image: linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red) 1;
}